import React, { useState } from 'react';

function ChatComponent() {
  const [messages, setMessages] = useState([
    { text: '欢迎使用稿定设计，查看帮助中心，如需人工客服帮助，请在对话框中输入"人工"。人工客服工作时间为工作日09:30 - 12:00, 13:30 - 18:00，非工作时间欢迎您留言，我们将在24小时内答复您。', isSystem: true },
    { text: '常见问题', isSystem: true },
    { text: '如何选择会员版本', isSystem: true },
    { text: '玩法教程与帮助中心', isSystem: true },
    { text: '什么是稿豆', isSystem: true },
    { text: '为什么账号被冻结', isSystem: true }
  ]);
  //  <a href="/Al">这里</a> 
  const handleSendMessage = (message) => {
    // 模拟自动回复
    let reply = '';
    if (message.includes('会员')) {
      reply = '会员有多种版本，可根据您的需求选择，如基础版、专业版等，详情可查看帮助中心。';
    } else if (message.includes('稿豆')) {
      reply = '稿豆是我们平台的虚拟货币，可用于购买一些服务和资源哦。';
    } else {
      reply = '您的问题我们已收到，将尽快为您处理。';
    }

    // 添加用户发送的消息和自动回复到消息列表
    setMessages([
      ...messages,
      { text: message, isSystem: false },
      { text: reply, isSystem: true }
    ]);
  }
  return (
    <div className='chat-container'>
      {messages.map((message, index) => (
        <div key={index} style={{ marginBottom: '10px' }}>
          {message.isSystem ? <div style={{ backgroundColor: '#f0f0f0', borderRadius: '5px' }} dangerouslySetInnerHTML={{ __html: message.text }}></div> :
            <div style={{ backgroundColor: '#e0e0e0', borderRadius: '5px', }}>{message.text}</div>
          }
        </div>
      ))}
      <input type="text" placeholder="请描述您的问题" onKeyDown={(e) => {
        if (e.key === 'Enter') {
          handleSendMessage(e.target.value);
          e.target.value = '';
        }
      }} />
      <button onClick={() => handleSendMessage(document.querySelector('input').value)}>发送</button>
    </div>
  );
}
export default ChatComponent;
